{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
    <link rel="stylesheet" href="{% static 'laydate/theme/default/laydate.css' %}">
    <script src="{% static 'laydate/laydate.js' %}"></script>
    <script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}"></script>
    <script src="{% static 'plugins/vue1/vue.js' %}"></script>

    <style>
        .login-banner {
            width: 100%;
            background: url("{% static 'public/img/banner2.jpg' %}") center bottom/cover no-repeat;
        }
    </style>
{% endblock header_tail %}

{% block section_content %}
    <!--头部-->
    <div class="row" id="nav-app">
        <div class="col-lg-4 col-xs-4">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <p>所有项目</p>
                    <h3 id="allProject">{{ project_counts.all_project_num }}</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-coffee" style="margin-top: 15px;"></i>
                </div>
                <a href="{{ project_counts.task_manage_url }}" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-4 col-xs-4">
            <div class="small-box bg-red">
                <div class="inner">
                    <p>处理中项目</p>
                    <h3 id="progressProject">{{ project_counts.progress_project_num }}</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-sitemap" style="margin-top: 15px;"></i>
                </div>
                <a href="{{ project_counts.task_manage_url }}?project_settlement=0" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-4 col-xs-4">
            <div class="small-box bg-green">
                <div class="inner">
                    <p>已结算项目</p>
                    <h3 id="closeProject">{{ project_counts.close_project_num }}</h3>
                </div>
                <div class="icon" style="margin-top: 15px;">
                    <i class="fa fa-bell"></i>
                </div>
                <a href="{{ project_counts.task_manage_url }}?project_settlement=1" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>
    <!--头部--end-->
    <div>
        <div class="box-header with-border">
            <h3 class="box-title">项目管理</h3>
        </div>
        <div class="box box-primary">
        <!-- 检索框 start -->
            <div class="box-header with-border" style="border-color: #1b6d85">
                <!-- Date range -->
                <form role="form" id="searchForm">
                    <input class="no-display" type="text">
                    <p style="clear: both"></p>
                    <div style="width: 90%; float: left;">
                        {% for field in form %}
                            <div class="input-group select-config-div" style="float: left; ">
                                <label for="" class="control-label">{{ field.label }}：</label>
                                <p>{{ field }}</p>
                            </div>
                        {% endfor %}
                        <div class="input-group select-config-div" style="float: left; ">
                            <label for="" class="control-label">每页显示：</label>
                            <select name="limit" id="showNumSelect" class="config-input">
                                {% for i in limits %}
                                    {% if i == limit %}
                                        <option selected="selected" value="{{ i }}">{{ i }}条</option>
                                    {% else %}
                                        <option value="{{ i }}">{{ i }}条</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        {% if user.is_superuser %}
                            <div style="float: left;" class="input-group select-config-div">
                                <label for="id" class="control-label">代理机构：</label>
                                <select name="agency_id" class="config-input">
                                    <option selected="selected" value="">---------</option>
                                    {% for agency in agency_list %}
                                        {% if agency.id == agency_id %}
                                            <option selected="selected" value="{{ agency.id }}">{{ agency.agent_name }}</option>
                                        {% else %}
                                            <option value="{{ agency.id }}">{{ agency.agent_name }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                        {% endif %}
                    </div>
                    <div class="input-group" style="width: 5%; float: right;">
                        <input type="text" class="no-display">
                        <span id="searchBtn" onclick="searchProject()" class="form-control pull-left btn btn-sm btn-primary"
                                style="margin-top:20px;width: 50px">检索
                        </span>
                    </div>
                    <p style="clear: both"></p>
                    <div class="form-group">
                    </div>
                </form>
            </div>
        <!-- 检索框 end -->
        <!-- 展示搜索出来的任务 -->
            <div id="main">
                <div id="showMessage" v-show="message"> [[ message ]] </div>
                <div class="box-body" v-show="showMain">
                    <form id="model_form" role="form" method="post">
                        {% csrf_token %}
                        <div class="group">
                            {% if request.user.is_superuser %}
                            <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#settlement">结算</a>
                            {% endif %}
                            <span >共<b>[[ paginator.total ]]</b>个 </span>
                            <table id="task_each_table" border="1" class="table table-bordered table-hover table-striped">
                                <thead>
                                <tr>
                                    {% if request.user.is_superuser %}
                                    <th class="action-checkbox">
                                        <input type="checkbox" name="th_checkbox_all" onclick="checkAll(this)">
                                    </th>
                                    {% endif %}
                                    <th v-for="head in tableData.headers">
                                        <span style="float: left">
                                            [[ head.name ]]
                                        </span>
                                        {% if field.rank %}
                                            <a href="?[[ head.rank ]]=[[ head.rank_tag ]][[ page_args ]]"
                                               style="float: right">
                                                {% if field.rank_tag == 0 %}
                                                    <i class="fa fa-fw fa-sort"></i>
                                                {% elif field.rank_tag == 1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-asc"></i>
                                                {% elif field.rank_tag == -1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-desc"></i>
                                                {% endif %}
                                            </a>
                                        {% endif %}
                                    </th>
                                    <th>
                                        <span style="float: left">
                                            操作
                                        </span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-if="tableData.tasks == '' ">
                                            <td >暂无项目</td><td></td><td></td><td></td><td></td><td></td><td></td>
                                    </tr>
                                    <template v-for="task in tableData.tasks">
                                        <tr>
                                            {% if request.user.is_superuser %}
                                            <td class="action-checkbox">
                                                <input type="checkbox" name="td_checkbox" class="[[ task.batch ]]"
                                                       value="[[ task.id ]]" onclick="checkOne(this)">
                                            </td>
                                            {% endif %}
                                            <template v-for="head in tableData.headers">
                                                <td v-if="head.key == 'create_time'|| head.key == 'deadline_time' ||  head.key == 'project_quality_flag'">
                                                    [[ parseTime(task[head.key]) ]]
                                                </td>
                                                <td v-else>
                                                    [[ task[head.key] ]]
                                                </td>
                                            </template>
                                            <td class="btn-group">
                                                <a class="btn btn-info btn-xs" href="{{ project_detail_url }}?project_id=[[task.id]]">项目详情</a>
                                                <a class="btn btn-info btn-xs" href="{{ project_allot_task_url }}?project_id=[[task.id]]">任务分配</a>
                                                <a href="" class="btn btn-info btn-xs">导出项目详情</a>
                                                <a href="javascript:void(HaveSpotRecord('[[task.id]]', 1))" class="btn btn-info btn-xs">修改抽检</a>
                                                <a href="javascript:void(HaveSpotRecord('[[task.id]]', 0))" class="btn btn-info btn-xs">反馈抽检</a>
                                                {% if user.is_superuser %}
                                                <a class="btn btn-info btn-xs" href="{% url 'maintain:operating_record' 'project' %}?id=[[task.id]]">操作记录</a>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                            <p class="" id="paginator">
                                <a class="btn btn-default btn-xs" v-if="paginator.current > 1" onclick="toPage('first',paginator.limit)">首页</a>
                                <a class="btn btn-default btn-xs" v-else disabled="true">首页</a>
                                <a class="btn btn-default btn-xs" v-if="paginator.current > 1" onclick="toPage('prev',paginator.limit)">上一页</a>
                                Page [[ paginator.current ]] of [[ paginator.last ]]
                                <a class="btn btn-default btn-xs" v-if="paginator.current < paginator.last" onclick="toPage('next',paginator.limit)">下一页</a>
                                <a class="btn btn-default btn-xs" v-if="paginator.current < paginator.last" onclick="toPage('last',paginator.limit)">尾页</a>
                                <a class="btn btn-default btn-xs" v-else disabled="true">尾页</a>
                                <input type="text" id="page-judge" style="width: 30px;height:20px; margin-left: 20px" onkeyup="toPage('judge', paginator.limit)">
                                <a class="btn btn-default btn-xs"  onclick="toPage('judge', paginator.limit)">跳页</a>
                            </p>
                        </div>
                        <!-- /.box-footer -->
                        <div class="box-footer">
                            <button class="btn btn-primary no-display" id="submit_button">确认</button>
                            <button type="button" class="btn btn-primary" id="save_submit" name="_save"
                                    style="display: none">sure
                            </button>
                        </div>
                    </form>
                </div>

                <!--弹出操作提示消息-->
                <div class="modal fade" id="submit_spot_checks" tabindex="-1" role="dialog"
                     aria-labelledby="myModalLabel" style="top:40%">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header" style="background-color: #307095;font-weight: bold;">
                                <label>抽查结果：</label>
                            </div>
                            <div v-for="submitSpot in submit_spot_checks_list" id="msgBoxMsg" class="modal-body" >
                                <div style="border: 1px solid #BBBBBB;">
                                    <div style="overflow:auto;text-align:center;border-bottom: 1px solid #BBBBBB;">
                                        <span>[[ submitSpot.sampling_title ]]</span>
                                    </div>
                                    <div style="overflow:auto;border-right: 1px solid #BBBBBB;width: 50%;float:left;padding-left: 40px">
                                        <div v-for="describe in submitSpot.describe">[[ describe ]]</div>
                                    </div>
                                    <div style="overflow:auto;width: 50%;float:left;border-left: 1px solid #BBBBBB;">
                                        <div style="padding-left: 20px" >错误任务ID:</div>
                                        <a v-for="id in submitSpot.id" style="padding-left: 20px;color: red;cursor:pointer" onclick="tiaozhuan('[[ id ]]')"> [[ id ]]</a>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer" style="text-align:center;">
                                <button type="button" class="btn btn-default" data-dismiss="modal">确认
                                </button>
                                <button type="button" class="btn btn-default"
                                        data-dismiss="modal">返回
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--分配项目-->
    <div class="modal fade" id="distribution" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:20%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body" style="overflow:auto">
                    <label>请选择要分配给谁：</label>
                    <table id="user_each_table" border="1" class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>
                                    <span style="float: left">
                                        代理名
                                    </span>
                                </th>
                            </tr>
                        </thead>
                        <tbody id = 'aaa'>
                            {% for agency in Agencys %}
                                <br>
                                <tr>
                                    <td class="action-checkbox">
                                        <input type="radio" name="utd_checkbox" value="{{ agency.id }}"  onclick="_checkOne(this)">
                                    </td>
                                    <td>{{ agency.agent_name }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" id="confirm_close" class="btn btn-default"
                            data-dismiss="modal" onclick="confirmClose()">确认
                    </button>
                    <button type="button" id="cancel_close" class="btn btn-default"
                            data-dismiss="modal" >取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--结算-->
     <div class="modal fade" id="settlement" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="SettMsgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    结算密码
                    <input type="password" name="maintain_pwd" class="config-input" autocomplete="off">
                    确定要结算吗?
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button" class="btn btn-default" onclick="settlement_maintain()" data-dismiss="modal">
                        确认
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--抽检比例-->
     <div class="modal fade" id="spot_check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="SpotCkeckMsgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    未检测到抽检记录 <br>
                    请输入抽检比例（10为全部）
                    <input type="number" οninput="if(value>10)value=10;if(value<1)value=1" name="spot_ratio" id="spot_ratio"
                           class="config-input" autocomplete="off">
<!--                    <input type="hidden" name="spot_project_id" id="spot_project_id" value="">-->
<!--                    <input type="hidden" name="spot_is_modify" id="spot_is_modify" value="">-->
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button" class="btn btn-default" onclick="CreateSpotRecord()" data-dismiss="modal">
                        确认
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
            // 时间控件
        laydate.render({
            elem: '#test1',
            range: true
        });
        laydate.render({
            elem: '#test2'
            , range: true
        });
        laydate.render({
            elem: '#test3'
            , range: true
        });
        laydate.render({
            elem: '#test4'
            , range: true
        });
        laydate.render({
            elem: '#test5'
            , range: true
        });
        // 侧边栏
        function changeColor(id, color){
            $(id).parent().parent().addClass("active");
            $(id).children().css("color", color);
        }
        changeColor("#maintain_"+"{{ manage_type }}", "#00FF7F");
        // Vue
        Vue.config.delimiters = ["[[", "]]"];
        var mainVue = new Vue({
            el: "#main",
            data: {
                page: 1,
                status: 1,
                limit: '{{ limit }}',
                showMain: false,
                tableData: {},
                paginator: {},
                message: "",
                submit_spot_checks_list:[],
            },
            methods: {
                parseTime :function (timeStamp){
                    if (!timeStamp){
                        return ""
                    }
                    var newDate = new Date();
                    newDate.setTime(timeStamp * 1000);
                    return newDate.toLocaleDateString()
                },
                parsePer :function (num1,num2){
                    var newDate = new Date();
                    newDate.setTime(timeStamp * 1000);
                    return newDate.toLocaleDateString()
                }
            },
        });
        // 检索
        function searchProject(page=1){
            var project_manage_api = "{{ project_manage_api }}";
            var searchForm = $("#searchForm").serializeArray();
            var data = {"csrfmiddlewaretoken": "{{ csrf_token }}"};
            $.each(searchForm, function() {
                data[this.name] = this.value;
            });
            if ("{{ project_settlement }}"){
                data['project_settlement'] = "{{ project_settlement }}";
            }
            data['page'] = page;
            $.ajax({
                type: "POST",
                url: project_manage_api,
                data: data,
                 success: function(response) {
                    if (response){
                        mainVue.limit = response.limit;
                        mainVue.showMain = true;
                        mainVue.tableData = response.tableData;
                        mainVue.paginator = response.paginator;
                        mainVue.message = response.message;
                    }else{
                        mainVue.showMain = false;
                    }
                 }
             })
        }
        searchProject();

        // 翻页
        function toPage(flag){
            var page;
            var limit = mainVue.limit;
            switch (flag) {
                case 'first':page = 1;
                break;
                case 'last':page = mainVue.paginator.last;
                break;
                case 'prev':page = mainVue.paginator.current - 1;
                break;
                case 'next':page = mainVue.paginator.current + 1;
                break;
                case 'judge':page = $("#page-judge").val();
                break;
                default:page=1;
            }
            if (!page || page < mainVue.paginator.first){
                page = mainVue.paginator.first;
            }else if (page > mainVue.paginator.last){
                page = mainVue.paginator.last;
            }
            searchProject(page, limit);
        }

        // 选中全部
        function checkAll(obj) {
            if ($(obj).is(":checked")) {
                $("input[name='td_checkbox']").prop("checked", true);
            } else {
                $("input[name='td_checkbox']").prop("checked", false);
            }
        }

        function settlement_maintain() {
            var _pids = [];
            $("input[name='td_checkbox']:checked").each(
                function () {
                    _pids.push($(this).val());
                }
            );
            if (!_pids) {
                alert('没有选中任务');
                return false;
            }
            var project_ids = _pids.join();
            var maintain_pwd = $("input[name='maintain_pwd']").val();
            $.ajax({
                type: "POST",
                url: "{% url 'maintain:settlement_api' %}",
                data: {
                    project_ids: project_ids,
                    maintain_pwd: maintain_pwd,
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                success: function(response) {
                    alert(response.message);
                    window.location.reload();
                 }
             })
        }
        var spot_is_modify = None;
        var spot_project_id = None;
        function HaveSpotRecord(project_id, is_modify) {
            spot_project_id = project_id;
            spot_is_modify = is_modify;
            $.ajax({
                type: "POST",
                url: "{% url 'maintain:have_spot_record' %}",
                data: {
                    project_id: project_id,
                    is_modify: is_modify,
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                success: function (response) {
                    if (response.records > 0){
                        window.open("{% url 'maintain:spot_check' %}?project_id=" + project_id + "&is_modify=" + is_modify)
                    }else {
                        $("#spot_check").modal();
                    }
                }
            })
        }

        function CreateSpotRecord() {
            var spot_ratio = $('#spot_ratio').val();
            $.ajax({
                type: "POST",
                url: "{% url 'maintain:create_spot_record' %}",
                data: {
                    project_id: spot_project_id,
                    is_modify: spot_is_modify,
                    spot_ratio: spot_ratio,
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                success: function (response) {
                    if (response.code == 0){
                        window.open("{% url 'maintain:spot_check' %}?project_id=" + spot_project_id + "&is_modify=" + spot_is_modify)
                    }else {
                        alert(response.message)
                    }
                }
            })
        }
    </script>
{% endblock section_content %}
